Как вставить видео на сайт

В нашу техническую поддержку присылают очень много вопросов, касательно того, как самостоятельно добавить тот или иной декоративный функционал в шаблон Moguta. В прошлой статье мы рассказали как добавить видео в фон сайта, а в этой, основываясь на ваших пожеланиях, мы расскажем, как добавить видео на страницу сайта.

Как вставить видео на сайт

Итак, мы разберем несколько способов вставки видео на сайт:

1. Вставить с помощью HTML
2. Вставить видео с Youtube
3. Как вставить видео с Rutube. Vimeo и прочих сайтов
4. Как вставить видео в шаблон Moguta

Как вставить видео средствами HTML

<video>

<source src = "/uploads/video.mp4" type = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

<source src = "/uploads/video.ogg" type = 'video/ogg; codecs="theora, vorbis"'>

<source src="/uploads/video.webm" type='video/webm; codecs="vp8, vorbis"'>

</video>

Вставить видео с Youtube

Для того, чтобы вставить видео с сайта Youtube необходимо:

1. Воспользоваться кнопкой "Поделиться", которая находится сразу под роликом;
2. Выбрать вкладку "HTML-код";
3. Скопировать сгенерированный код;
4. Вставить скопированный код на сайт;
5. Через атрибуты "width" и "height" настроить высоту и ширину блока видео, если это необходимо;

Как вставить видео с Rutube. Vimeo и прочих сайтов

Алгоритм вставки видео с различных видеосервисов такой же, как с Youtube.

1. Нажать кнопку "Поделиться" или "Share";
2. Вставить сгенерированный код к себе на сайт;
3. При необходимости стилизовать блок с видео;

Как стилизовать блок с видео

Во-первых, у тега video есть несколько атрибутов:

1. autoplay - Видео начинает воспроизводиться автоматически после загрузки страницы.
2. controls - Добавляет панель управления к видеоролику.
3. height - Задает высоту области для воспроизведения видеоролика.
4. loop - Повторяет воспроизведение видео с начала после его завершения.
5. poster - Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.
6. preload - Используется для загрузки видео вместе с загрузкой веб-страницы.
7. src - Указывает путь к воспроизводимому видеоролику.
8. width - Задает ширину области для воспроизведения видеоролика.

Во-вторых, код с видео можно обернуть в отдельный div и использовать CSS для стилизации

Как вставить видео в шаблон Moguta

Рассмотрим на примере вставки видео в форму обратной связи. Вставим первое видео на всю ширину контейнера, а второе отцентруем.

​​​​​​​

1. Через административную панель заходим Настройки - Шаблон;

2. Выбираем файл страницы, на которой хотим вставить видео;

3. Вставляем код в нужное место;

4. Добавляем второе видео в div и добавляем ему ширину, равную ширине видео, а также автоматические внешние отступы;

Теперь вы знаете как добавить видео на сайт из разных источников. Появились вопросы? - Пишите нам в группе, комментариях или техподдержке. Мы будем рады помочь вам!